<template>
  <div class="search_container">
    <span v-if="activeMenu != 6">{{ searchTitle }}： </span>
    <el-input
      placeholder="请输入搜索内容"
      class="ipt"
      clearable
      v-model="formData.title"
      v-if="activeMenu != 6"
    ></el-input>
    <!-- <el-date-picker
      v-model="formData.startTime"
      type="date"
      placeholder="开始时间"
      style="width: 134px"
      value-format="yyyy-MM-dd"
    >
    </el-date-picker>
    <span>至</span>
    <el-date-picker
      v-model="formData.endTime"
      type="date"
      placeholder="结束时间"
      style="width: 134px"
      value-format="yyyy-MM-dd"
    >
    </el-date-picker> -->
    <span>时间： </span>
    <el-date-picker
      v-model="formData.dateTime"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']"
      value-format="yyyy-MM-dd HH:mm:ss"
    >
    </el-date-picker>
    <el-button
      type="primary"
      icon="el-icon-search"
      class="search_btn"
      @click="toSearch"
      >搜索</el-button
    >
    <div class="top_r" @click="allRead">
      <img src="@/assets/img/msg.png" alt="" />
      <span>全部标记为已读</span>
    </div>
  </div>
</template>
<script>
export default {
  /**
   * 消息中心-搜索栏
   */
  model: {
    prop: "formData",
    event: "change",
  },
  data() {
    return {};
  },
  props: ["formData", "activeMenu"],
  methods: {
    toSearch() {
      this.$emit("toSearch");
    },
    allRead() {
      this.$emit("allRead");
    },
  },
  computed: {
    searchTitle() {
      if (
        this.activeMenu == "0" ||
        this.activeMenu == "1" ||
        this.activeMenu == "2" ||
        this.activeMenu == "8"
      ) {
        return "学员姓名";
      } else if (this.activeMenu == "3") {
        return "合同标题";
      } else if (this.activeMenu == "4") {
        return "回款编号";
      } else if (this.activeMenu == "5") {
        return "退款编号";
      } else if (this.activeMenu == "7") {
        return "名称";
      }
    },
  },
};
</script>
<style scoped lang="scss">
.search_container {
  margin-top: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  .ipt {
    width: 200px;
    margin-right: 16px;
  }
  > span {
    padding: 0 2px;
  }
  .search_btn {
    margin-left: 14px;
  }
}
.top_r {
  width: 160px;
  height: 32px;
  background: #edf4ff;
  border: 1px solid #0066f9;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #0066f9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 14px;
  cursor: pointer;
  img {
    width: 20px;
    height: 20px;
    margin-right: 4px;
  }
}
</style>